<template>
  <xdh-echarts :options="options"
               :geo="geo"
               map="jiangsu"
               :width="width"
               :height="height"
               @mouseover="mapMouseover"
               @mouseout="mapMouseout"></xdh-echarts>
</template>

<script>
  import jiangsu from '../widgets/xdh-echarts/map/province/jiangsu.json'
  import XdhEcharts from '../widgets/xdh-echarts'

  const geoCoordMap = {
    '徐州市': [117.784811, 34.261792],
    '连云港市': [119.178821, 34.600018],
    '宿迁市': [118.475162, 33.963008],
    '淮安市': [119.021265, 33.597506],
    '盐城市': [120.139998, 33.877631],
    '扬州市': [119.561003, 32.893159],
    '泰州市': [120.055176, 32.484882],
    '南京市': [118.867413, 31.941544],
    '镇江市': [119.352753, 32.054402],
    '常州市': [119.906973, 31.772752],
    '无锡市': [120.351663, 31.574729],
    '苏州市': [120.819585, 31.299379],
    '南通市': [120.964608, 32.316212]
  }

  const myHosName = '南京市';
  const data = [
    [
      {
        name: '南京市'
      },
      {name: '徐州市', value: 190}
    ],
    [
      {
        name: '南京市'
      },
      {name: '连云港市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '宿迁市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '淮安市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '盐城市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '扬州市', value: 90}],
    [
      {
        name: '南京市'
      }, {name: '泰州市', value: 120}],
    [
      {
        name: '南京市'
      }, {name: '南京市', value: 120}],
    [
      {
        name: '南京市'
      }, {name: '镇江市', value: 120}],
    [
      {
        name: '南京市'
      }, {name: '常州市', value: 120}],
    [
      {
        name: '南京市'
      }, {name: '无锡市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '苏州市', value: 190}],
    [
      {
        name: '南京市'
      }, {name: '南通市', value: 190}
    ]
  ]

  const convertData = function (data) {
    var res = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = geoCoordMap[dataItem[0].name];
      let toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord]
        });
      }
    }
    return res;
  };

  const transferData = function (data) {
    return data.map(function (dataItem) {
      return {
        name: dataItem[1].name,
        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
      };
    })
  }

  const mySeries = [];

  [
    [myHosName, data]
  ].forEach(function (item, i) {
    mySeries.push({ // 线
      name: item[0],
      //                      name: item[0] + ' Top10',
      type: 'lines',
      zlevel: 1,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.7,
        color: '#fff',
        symbolSize: 3
      },
      lineStyle: {
        normal: {
          color: '#efe035',
          width: 0,
          curveness: 0.2
        }
      },
      data: convertData(item[1])
    }, { // 移动 点
      name: item[0],
      //                      name: item[0] + ' Top10',
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.2,
        symbol: 'pin',
        symbolSize: 10
      },
      lineStyle: {
        normal: {
          color: '#efe035',
          width: 2,
          opacity: 1,
          curveness: 0.2
        }
      },
      data: convertData(item[1])
    });
  });

  const defaultOptionsSeries = [
    {
      name: '点',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'image://' + require('../assets/images/map_title_bg1.png'),
      symbolSize: 0,
      symbolOffset: [0, -40],
      label: {
        normal: {
          show: true,
          position: 'insideTopLeft',
          formatter: function (params) {
            return '      ' + params.value[2]
          },
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        }
      },
      itemStyle: {
        normal: {
          color: '#19AFF4' // 标志颜色
        }
      },
      zlevel: 6
    },
    {
      name: 'jiangsu',
      type: 'map',
      mapType: 'jiangsu',
      left: 80,
      right: 80,
      top: 10,
      bottom: 10,
      roam: false,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#111c38',
          borderColor: '#4163bb',
          borderWidth: 2
        },
        emphasis: {
          areaColor: '#111c38'
        }
      }
    },
    {
      name: 'effectScatter',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 15,
      symbolOffset: [0, -10],
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          show: true,
          fontSize: 20,
          color: '#a9b6cb',
          position: 'bottom',
          formatter: function (params) {
            return params.name.replace(/([\s\S]+)市/, '$1')
          }
        }
      },
      itemStyle: {
        normal: {
          color: '#efe035',
          shadowBlur: 10,
          shadowColor: '#efe035'
        }
      },
      zlevel: 1
    }]

  // 空函数
  const noop = function () {
  }

  export default {
    components: {
      XdhEcharts
    },
    props: {
      mapOptions: {
        type: Object,
        default: function () {
          return {
            series: defaultOptionsSeries
          }
        }
      },
      mapData: {
        type: Array,
        default: function () {
          return transferData(data)
        }
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      mouseoverHandler: {
        type: Function,
        default: noop
      },
      mouseoutHandler: {
        type: Function,
        default: noop
      },
      clickHandler: {
        type: Function,
        default: noop
      }
    },
    data() {
      return {
        geo: jiangsu
      }
    },
    methods: {
      mapMouseover(params) {
        return this.$set(this.mapData[params.dataIndex], 'symbolSize', [158, 60])
      },
      mapMouseout(params) {
        return this.$set(this.mapData[params.dataIndex], 'symbolSize', 0)
      }
    },
    computed: {
      options() {
        return {
          geo: {
            show: true,
            map: 'jiangsu',
            left: 80,
            right: 80,
            top: 10,
            bottom: 10,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#fff',
                borderWidth: 0,
                shadowColor: 'rgba(18, 38, 89, 1)',
                shadowBlur: 20
              }
            }
          },
          series: [...mySeries, ...[{
            name: 'jiangsu',
            type: 'map',
            mapType: 'jiangsu',
            left: 80,
            right: 80,
            top: 10,
            bottom: 10,
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#13317f',
                borderColor: '#17c0ff',
                borderWidth: 2
              },
              emphasis: {
                areaColor: '#111c38'
              }
            },
            data: transferData(data)
          }, {
            name: 'effectScatter',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 15,
            symbolOffset: [0, -10],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                fontSize: 20,
                textShadowColor: 'rgba(231, 247, 254,.5)',
                textShadowBlur: 15,
                color: '#a9b6cb',
                position: 'bottom',
                formatter: function (params) {
                  return params.name.replace(/([\s\S]+)市/, '$1')
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#efe035',
                shadowBlur: 10,
                shadowColor: '#efe035'
              }
            },
            zlevel: 3,
            data: transferData(data)
          }, {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'image://' + require('../assets/images/map_title_bg5.png'),
            symbolSize: 0,
            symbolOffset: [0, -40],
            label: {
              normal: {
                show: true,
                position: 'insideTopLeft',
                formatter: function (params) {
                  return '接收：' + params.value[2] + '，发送：' + params.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#19AFF4' // 标志颜色
              }
            },
            zlevel: 4,
            data: this.mapData
          }]]
        }
      }
    }
  }
</script>
